<template>
  <div class="detail">
    <!-- 头图 -->
    <Toptheme imgUrl="toppic03" :des1="des1" :des2="des2" height="200px"></Toptheme>
    <div class="content w1160">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/news' }">橙劵新闻详情</el-breadcrumb-item>
        <el-breadcrumb-item>{{ info.title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 内容 -->
      <h2>{{ info.title }}</h2>
      <div class="date fz16">{{ info.updatedAt }}</div>
      <div class="text" v-html="info.content"></div>
    </div>
  </div>
</template>

<script setup>
import Toptheme from '@/components/top-theme/index.vue'
import { getNewsDetail } from '@/api/news'
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
defineOptions({ name: 'NewsDetail', components: { Toptheme } })
const route = useRoute()
const { id } = route.params
const info = reactive({
  content: '',
  title: '',
  updatedAt: ''
})
const des1 = ref('橙券新闻动态')
const des2 = ref(
  '新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步！'
)
// 获取新闻详情
const getNew = async () => {
  const { data } = await getNewsDetail(id)
  const { title, content, updatedAt } = data
  info.title = title
  info.content = content
  info.updatedAt = updatedAt
}
getNew()
</script>

<style lang="scss" scoped>
.content {
  margin-bottom: 60px;
  padding-top: 50px;
  & > h2 {
    margin-top: 60px;
    text-align: center;
    font-size: 30px;
  }
  & > .date {
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    color: #110808;
  }
  & > .text {
    margin-top: 30px;
    font-size: 16px;
  }
}
</style>
